<template>
	<view class="content">
		<nav-bar :title="$t('切換語言')" leftIcon="left"></nav-bar>
		<view class="btn-item">
			<view class="title" v-if="lang == 'zh-Hant'" @click="changeLang(range[0].value)">
				English
			</view>
			<view class="title" v-if="lang == 'en'" @click="changeLang(range[1].value)">
				繁體中文
			</view>
			<!-- 			<view class="value">
				<view class="checkBook">
					<view class="yn-y" v-if="lang == item.value">
						<image class="gou" src="@/assets/orderDetail/dui.png"></image>
					</view>
					<view class="yn-n" @click="changeLang(item.value)"></view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useI18n
	} from 'vue-i18n'
	const {
		t
	} = useI18n()
	const {
		ctx
	} = getCurrentInstance()
	let lang = ref('')
	onLoad(() => {
		getLang()
	})
	uni.getLocale()
	const range = reactive([{
			value: 'en',
			text: 'Enghist'
		}, {
			value: 'zh-Hant',
			text: '繁體中文'
		}

	])

	const getLang = () => {
		// lang.value = uni.getLocale()
		lang.value = uni.getStorageSync('lang')
	}
	const changeLang = (lang) => {

		// if (!lang) {
		// 	uni.setLocale('zh-Hant')

		// } else {
		// 	uni.setLocale(lang)
		// }

		uni.setStorageSync('lang', lang)
		ctx.$i18n.locale = lang
		getLang()
		// // #ifdef H5
		// uni.switchTab({
		// 	url: '/pages/my/my'
		// })
		// // #endif	
	}
</script>

<style lang="scss" scoped>
	.btn-item {
		width: 690rpx;
		height: 100rpx;
		background: #24232C;
		border-radius: 20rpx;
		padding: 0 24rpx 0 22rpx;
		box-sizing: border-box;
		margin-bottom: 31rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 690rpx;
		}

		.value {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.btn-sub {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #5641DD, #B1A6FD);
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}


	.yn-y {
		width: 40rpx;
		height: 40rpx;
		background: #6958D6;
		border: 2px solid #6958D6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		.gou {
			position: relative;
			top: 3rpx;
			width: 30rpx;
			height: 20rpx;
		}
	}

	.yn-n {
		width: 40rpx;
		height: 40rpx;
		border: 2px solid #FFFFFF;
		border-radius: 50%;
	}
</style>